<template>
  <div id="login-modal">
    <a-form
      ref="formRef"
      :rules="rules"
      :model="form"
      @submit-success="handleSubmit"
    >
      <a-form-item field="userAccount" label="账号：" validate-trigger="blur">
        <a-input v-model="form.userAccount" placeholder="请输入账号" />
      </a-form-item>
      <a-form-item field="userPassword" label="密码：" validate-trigger="blur">
        <a-input-password
          v-model="form.userPassword"
          placeholder="请输入密码"
        />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" html-type="submit" style="width: 150px"
            >登录
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { UserControllerService } from "../../generated";
import store from "@/store";

const props = defineProps(["handleCancel"]);

const rules = {
  userAccount: [{ required: true, message: "用户名不能为空！" }],
  userPassword: [{ required: true, message: "密码不能为空！" }],
};

interface FormState {
  userAccount: string;
  userPassword: string;
  remember?: boolean;
}

const form = reactive<FormState>({
  userAccount: "zhang",
  userPassword: "12345678",
});

const handleSubmit = async (values: any) => {
  console.log("提交结果=>", values);
  await UserControllerService.userLoginUsingPost({ ...values });
  store.dispatch("user/getLoginUser", {});
  // 关闭弹窗
  props.handleCancel();
};
</script>
